<template>
  <div>
    <h2 class="title">{{total}} 个回复</h2>
    <article v-for="(reply, index) in replies" :key="'post-' + currentPostId + '-reply-' + index" class="clearfix">
      <div class="pull-left recommend-btn">
        <div class="ivu-btn">
          <i-tooltip placement="top">
            <div slot="content">
              <p>答案对人有帮助，有参考价值</p>
            </div>
            <a href="javascript:;" @click="agree(reply)"><i-icon type="arrow-up-b" class="display-block"></i-icon></a>
          </i-tooltip>
          {{reply.recommended}}
          <i-tooltip>
            <div slot="content">
              <p>答案没帮助，是错误的</p>
              <p>答案，答非所问</p>
            </div>
            <a href="javascript:;" @click="disagree(reply)"><i-icon type="arrow-down-b" class="display-block"></i-icon></a>
          </i-tooltip>
        </div>
      </div>
      <editor-viewer :html="reply.content"></editor-viewer>
      <div class="clearfix reply-toolbar">
        <span><date-span :value="reply.createdAt"></date-span> 发布</span>
        <a href="javascript:;" v-if="reply.editable" @click="removeReplyItem(reply)">删除</a>
        <span class="pull-right" :title="reply.createdBy.code + ' / ' + reply.createdBy.name">{{reply.createdBy.name}}</span>
      </div>
    </article>
    <div class="margin-top-20">
      <h2>撰写答案</h2>
      <q-editor :html.sync="form.content"></q-editor>
      <i-button type="primary" class="submit-answer margin-top-10" @click="reply()">提交回答</i-button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import QEditor from '../editor/Simple'
import EditorViewer from '../editor/View'
import DateSpan from '../data-span/Date'
export default {
  components: {
    QEditor,
    EditorViewer,
    DateSpan
  },
  data() {
    return {
      currentPostId: null,
      replies: [],
      total: 0,
      form: {
        content: '',
        id: null
      }
    }
  },
  props: {
    postId: {
      type: String,
      required: true
    }
  },
  methods: {
    ...mapActions({
      getPostReplies: 'getPostReplies',
      saveReply: 'saveReply',
      removePost: 'removePost',
      addEvent: 'addEvent'
    }),
    handle(item, agreed) {
      const that = this
      this.addEvent({
        model: {
          id: item.id,
          type: agreed ? 'AgreeTopic' : 'DisagreeTopic'
        },
        callback(result) {
          if (result === 0) {
            that.$Message.warning('不可重复操作')
            return
          }
          that.$Message.success('操作成功')
          item.recommended += result
        }
      })
    },
    agree(item) {
      this.handle(item, true)
    },
    disagree(item) {
      this.handle(item, false)
    },
    setCurrentPostId(val) {
      if (this.currentPostId === val) return
      this.form.id = this.currentPostId = val
    },
    loadReplies(postId) {
      const that = this
      that.getPostReplies({
        id: postId,
        callback(data) {
          that.replies = data.replies
          that.total = data.total
        }
      })
    },
    reply() {
      if (!this.form.content) return
      const that = this
      this.saveReply({
        form: this.form,
        callback(data) {
          if (data.accepted) {
            that.loadReplies(that.form.id)
            that.form.content = null
          }
        }
      })
    },
    removeReplyItem(item) {
      const that = this
      that.$Modal.confirm({
        title: '确认',
        content: '确认删除回复吗？',
        okText: '确定',
        cancelText: '取消',
        loading: true,
        onOk: () => {
          that.removePost({
            id: item.id,
            callback() {
              that.$Modal.remove()
              that.$Notice.success({
                title: '提示',
                desc: '删除回复成功'
              })
              that.loadReplies(that.currentPostId)
            }
          })
        }
      })
    }
  },
  watch: {
    postId(val) {
      this.setCurrentPostId(val)
    },
    currentPostId(postId) {
      this.loadReplies(postId)
    }
  },
  mounted() {
    this.setCurrentPostId(this.postId)
  }
}
</script>

<style scoped lang="less">
h2,
h3 {
  line-height: 1.2;
  font-weight: 500;
  color: #333;
  padding-bottom: 10px;
  &.title {
    border-bottom: 2px solid #ccc;
  }
}

.submit-answer {
  padding: 8px 20px;
  font-size: 14px;
}

article {
  border-bottom: 1px solid #ccc;
  padding: 5px 0;
  padding-left: 40px;
  position: relative;
  min-height: 100px;
  .recommend-btn {
    position: absolute;
    left: 0;
    top: 15px;
  }

  .quill-editor {
    min-height: 55px;
  }
  .reply-toolbar {
    padding: 5px 15px;
    a,
    span {
      color: #999;
    }
    a:hover {
      color: #333;
    }
  }
}
</style>
